<template>
    <div class="hot">
        <!-- 轮播 -->
        <div class="swiper-container" v-if="homecasual.length>0">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for='(casual,index) in homecasual' :key="index">
                    <img class="swiperImg" :src="casual.imgurl" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- 中间导航 -->
        <hot-nav></hot-nav>
        <!-- 广告位 -->
        <div class="hot-ad">
            <img src="../../imgs/hot_ad/home_ad.gif" width="100%" alt="">
        </div>
        <!-- 商品列表 -->
        <hot-shop-list></hot-shop-list>
    </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

import {
    mapState
  } from 'vuex'

import HotNav from './hotNav'
import HotShopList from './hotShopList'
export default {
    name:"Hot",
    components:{
        HotNav,
        HotShopList
    },
    computed:{
        ...mapState(['homecasual'])
    },
    mounted(){
        //请求轮播图数据
        this.$store.dispatch('reqHomeCasual');  
        //请求首页导航的数据
        this.$store.dispatch('reqHomeNav');
        //请求首页推荐的数据
        this.$store.dispatch('reqHomeShopList');       
        
        
    },
    watch:{ 
        homecasual(){
            this.$nextTick(()=>{
            //创建swiper实例
            var mySwiper = new Swiper ('.swiper-container', {
                loop: true, // 循环模式选项
                autoplay:true,
                
                // 如果需要分页器
                pagination: {
                el: '.swiper-pagination',
                }
            }) 
        })
        }
    }
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
    .hot{
        width 100%
        height 100%
        background #f5f5f5
        padding-top 46px; 
    }

    .swiperImg{
        width 100%
    }

    .hot-ad{
        background-color #fff
        margin 8px 0
        padding 5px
    }
</style>